<template>
	<view>

		<view class="content">
			<view class="box flexs11">
				<scroll-view scroll-y="true" class="scroll-Y left">
					<view class="flexs1" :class="[index==current?'left_list':'left_list_new'] "
						v-for="(item,index) in swiperList" :key="index" @click="menuTab(index)">
						<view class="line"></view>
						<view class="title">{{item.name}}</view>
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" class="scroll-Y right">
					<view class="right_box">
						<view class="right_list">
							<block v-for="(item,index) in goodsList" :key="index">
								<view  class="right_item" @click="goClass(item.id)">{{item.name}}</view>
							</block>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="">
		</view>
	</view>
</template>

<script>
	import {
		quizzes
	} from '../../api/index.js'
	export default {
		props: ['flag'],
		data() {
			return {
				//一级列表
				swiperList: [],
				//二级列表
				goodsList: [],
				current: 0
			}
		},
		onLoad() {

		},
		created() {
			quizzes().then((res) => {
				console.log(res.data)
				this.swiperList = res.data
				this.goodsList = res.data[0].second_list
			})
		},
		methods: {
			menuTab(index) {
				this.current = index
				this.goodsList = this.swiperList[index].second_list
			},
			goClass(id){
				uni.navigateTo({
					url:'../../pages/Brush/brush_type?classid='+id
				})
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		overflow: hidden;

		.box {
			width: 100%;
			height: calc(100vh - 94rpx);
			border-top: 4rpx solid #e5e5e5;

			.left_list {
				width: 210rpx;
				height: 110rpx;
				background-color: #fff;

				.line {
					width: 4rpx;
					height: 20rpx;
					background: #ffdd47;
					border-radius: 2rpx;
				}

				.title {
					width: 170rpx;
					text-align: center;
					color: #333;
					font-size: 24rpx;
				}
			}

			.left_list_new {
				width: 210rpx;
				height: 110rpx;
				background-color: #f2f2f2;



				.title {
					width: 170rpx;
					text-align: center;
					color: #333;
					font-size: 24rpx;
				}
			}

			.right_box {
				width: 100%;
				height: calc(100vh - 94rpx);
				background-color: #fff;
				border-top: solid 1rpx #fff;
				flex-wrap: wrap;
				padding: 0 20rpx;

				.right_list {
					margin-top: 0rpx;
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					flex-wrap: wrap;
					margin-top: 40rpx;

					.right_item {
						padding: 14rpx 22rpx;
						border: 1rpx solid #ccc;
						border-radius: 10rpx;
						margin: 14rpx 10rpx;
					}
				}
			}
		}
	}

	.left {
		width: 210rpx;
		height: 98%;
	}

	.right {
		width: 600rpx;
		height: 100%;
	}
</style>
